<script setup>
import { onMounted, ref } from 'vue'
import channelSelect from './components/channelSelect.vue'
import { getArticleListService } from '@/api/article.js'
import { formatDate } from '@/utils/formatDate'
import { Edit, Delete } from '@element-plus/icons-vue'
import articelEdit from './components/articelEdit.vue'
const loading = ref(false)
const articleManageList = ref([])
const params = ref({ pagenum: 1, pagesize: 5, cate_id: '', state: '' })
const total = ref(0)

const getArticleList = async () => {
  loading.value = true
  const res = await getArticleListService(params.value)
  console.log(res)
  loading.value = false
  articleManageList.value = res.data.data
  total.value = res.data.total
}
onMounted(() => {
  getArticleList()
})

// const articleManageList = ref([
//   {
//     id: 5691,
//     title: '新的文章',
//     pub_date: '2021-08-09T08:08:08.000Z',
//     state: '草稿',
//     cate_name: '未分类',
//   },
// ])

const onSearch = () => {
  params.value.pagenum = 1 // 重置页面
  getArticleList()
}

// 重置逻辑 => 将筛选条件清空，重新检索，从第一页开始展示
const onReset = () => {
  params.value.pagenum = 1 // 重置页面
  params.value.cate_id = ''
  params.value.state = ''
  getArticleList()
}

const handleSizeChange = (size) => {
  params.value.pagesize = size
  getArticleList()
}
const handleCurrentChange = (page) => {
  params.value.pagenum = page
  getArticleList()
}
const articleEditRef = ref()
const onAddArticle = () => {
  articleEditRef.value.openDrawer({})
}
const onEditArticle = (row) => {
  articleEditRef.value.openDrawer({ row })
}

// 添加或者编辑 成功的回调
const onSuccess = (type) => {
  if (type === 'add') {
    // 如果是添加，最好渲染最后一页
    const lastPage = Math.ceil((total.value + 1) / params.value.pagesize)
    // 更新成最大页码数，再渲染
    params.value.pagenum = lastPage
  }

  getArticleList()
}
</script>
<template>
  <PageContent title="文章管理">
    <template #extra>
      <el-button type="primary" @click="onAddArticle">发布文章</el-button>
    </template>
    <el-form inline>
      <el-form-item label="文章分类：" prop="cate_id">
        <channelSelect v-model="params.cate_id" style="width: 300px"></channelSelect>
      </el-form-item>
      <el-form-item label="文章状态：">
        <el-select style="width: 300px" v-model="params.state">
          <el-option label="发布" value="发布"></el-option>
          <el-option label="草稿" value="草稿"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">搜索</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="articleManageList" style="width: 100%">
      <el-table-column prop="title" label="文章标题">
        <template #default="{ row }"
          ><el-link type="primary" :underline="false">{{ row.title }}</el-link></template
        >
      </el-table-column>
      <el-table-column prop="cate_name" label="分类" />
      <el-table-column prop="pub_date" label="发表时间">
        <template #default="{ row }">{{ formatDate(row.pub_date) }} </template>
      </el-table-column>
      <el-table-column prop="state" label="状态" width="180" />
      <el-table-column prop="address" label="操作" width="180">
        <template #default="{ row }">
          <el-button
            circle
            plain
            type="primary"
            :icon="Edit"
            @click="onEditArticle(row)"
          ></el-button>
          <el-button
            circle
            plain
            type="danger"
            :icon="Delete"
            @click="onDelArticle(row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-model:current-page="pagenum"
      v-model:page-size="pagesize"
      :page-sizes="[2, 3, 5, 10]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!--
    <template #empty>
      <el-empty description="没有数据" />
    </template> -->

    <articelEdit ref="articleEditRef" @success="onSuccess"></articelEdit>
  </PageContent>
</template>

<style lang="scss" scoped>
.el-pagination {
  margin-top: 20px;
  float: right;
}
</style>
